<!DOCTYPE html>
<meta charset="utf-8">
<title>Chimera</title>
<head>
	<style>	
	text {
		font: 10px sans-serif;
		pointer-events: none;
		text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
	}
	</style>
</head>
<body>
	
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
//Width and height
			var w = 960;
			var h = 500;

			//Original data
			var dataset = {
				nodes: [
					{ name: "Critical-thinking and problem-solving" },
					{ name: "Creativity and innovation" },
					{ name: "Collaboration, teamwork and leadership" },
					{ name: "Cross-cultural undertanding" },
					{ name: "Communication and media fluency" },
					{ name: "Computing and ICT fluency" },
					{ name: "Career and learning self-reliance" },
					{ name: "Personal life" },
					{ name: "Academic life" },
					{ name: "Working life" }
				],
				links: [
					{ source: 0, target: 1 },
					{ source: 0, target: 2 },
					{ source: 0, target: 3 },
					{ source: 0, target: 4 },
					{ source: 1, target: 5 },
					{ source: 2, target: 5 },
					{ source: 2, target: 5 },
					{ source: 3, target: 4 },
					{ source: 5, target: 8 },
					{ source: 5, target: 9 },
					{ source: 6, target: 7 },
					{ source: 7, target: 8 },
					{ source: 8, target: 9 }
				]
			};

			//Initialize a default force layout, using the nodes and links in dataset
			var force = d3.layout.force()
								 .nodes(dataset.nodes)
								 .links(dataset.links)
								 .size([w, h])
								 .linkDistance([50])
								 .charge([-100])
								 .start();

			var colors = d3.scale.category10();

			//Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);
			
			//Create links as lines
			var links = svg.selectAll("line")
				.data(dataset.links)
				.enter()
				.append("line")
				.style("stroke", "#ccc")
				.style("stroke-width", 1);
			
			//Create nodes as circles
			var nodes = svg.selectAll("circle")
				.data(dataset.nodes)
				.enter()
				.append("circle")
				.attr("r", 10)
				.style("fill", function(d, i) {
					return colors(i);
				})
				.call(force.drag);
			
			var text = svg.append("g").selectAll("text").data(force.nodes()).enter().append("text").attr("x", 8).attr("y", ".31em").text(function(d) {
			return d.name;
		});
			
			//Every time the simulation "ticks", this will be called
			force.on("tick", function() {

				links.attr("x1", function(d) { return d.source.x; })
					 .attr("y1", function(d) { return d.source.y; })
					 .attr("x2", function(d) { return d.target.x; })
					 .attr("y2", function(d) { return d.target.y; });
			
				// nodes.attr("cx", function(d) { return d.x; })
					 // .attr("cy", function(d) { return d.y; });
				nodes.attr("transform", transform);
				text.attr("transform", transform);
	
			});

		function transform(d) {
			return "translate(" + d.x + "," + d.y + ")";
		}
		</script>

</body>
</html>